<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="../../public/static/api/activity/js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <title>积分商城</title>
    <style>
        .shop-container{
            background-color: #E4C896;
            width:100%;
            height:330px;
        }
        .shop-top{height:40px;border-bottom: 1px solid #9F6B30;display: flex;justify-content:space-between;color: #9F6B30;}
        .shop-top-1{display:flex;}
        .shop-top-1 span{font-size:16px;line-height: 40px;margin-left:10px;font-weight: bold;}
        .shop-top-1 div{font-size:16px;width:60px;background-color: #9F6B30;color:#FFFFFF;height:20px;border-radius: 8px;margin-top:10px;margin-left:10px;text-align: center;}
        .my-orders{margin-right:20px;}
        .shop-product-list{width: 100%;display: flex;margin-top:3%;margin-left:2%;}
        .product-item-img{background-repeat:no-repeat;background-position:center;background-size: 100% 100%;background-color: #DFB673;height:90px;}
        .product-item-top{border-radius:5px;border:2px solid #FFE08B;color: #9F6B30;width:100px;text-align: center;height:134px;}
        .shuliang{width:100px;padding-top:30px;padding-left:30px;color:#9F6B30}
        .biaodan{width:400px;color:#9F6B30;}
        .biaodan div{margin-top:5px;}
        .name,.phone{width:150px;}
        .address{width:150px;}
        .site{width:50px;}
        .btn-default{margin-top:10px;color: #FFF;background-color: #9F6B30;margin-left:40px;}
        .layui-m-layermain, .layui-m-layershade{
            position: fixed;
            left: 0;
            top: -50% !important;
            width: 100%;
            height: 100%;
        }
        select{
            height:26px;
        }
    </style>
</head>
<body>
    <div class="shop-container">
        <div class="shop-top">
            <div class="shop-top-1">
                <span>我的积分</span>
                <div>{$coin.coin}</div>
            </div>
            <div class="shop-top-1">
                <span class="my-orders" onclick="goto('orderlist')">我的订单</span>
            </div>
        </div>
        <div class="shop-product-list">
            <div class="product-item-top">
                <div class="product-item-img" style="background-image: url('{$shop_info.img_path}');"></div>
                <span>({$shop_info.shop_name})</span><br/>
                <span>{$shop_info.coin}积分</span>
                <input hidden="hidden" value="{$shop_info.serial}" id="id" name="id">
                <input hidden="hidden" value="{$shop_info.shop_code}" id="shop_code" name="shop_code">
            </div>
            <div class="shuliang">
               数量<br/>
                &nbsp;&nbsp;1
            </div>
            <div class="biaodan">
                <div>
                    姓名：<input class="name" id="name" type="text">
                </div>
                <div>
                    手机：<input class="phone" id="phone" type="text">
                </div>
                <div style="margin-left:-28px;">
                    身份证号：<input class="card" id="card" type="text">
                </div>
                <!--<div class="dizhi">
                    地址：<input class="site" type="text" name="shen" id="shen">省
                    <input class="site" type="text" name="shi" id="shi">市
                    <input class="site" type="text" name="qu" id="qu">区
                </div>-->
                <div class="dizhi">
                    地址：<select name="province" id="province"></select>
                    <select name="city" id="city"></select>
                    <select name="county" id="county"></select>
                </div>
                <div class="dizhi" style="margin-left:-28px;">
                    详细地址：<input style="width: 178px;" class="address" type="text" name="address" id="address">
                </div>
                {if($oldAddress != '')}
                <div style="margin-left:-55px;">
                    上次收货地址：<input type="checkbox" name="oldAddress" id="oldAddress" onchange="selectOld()">&nbsp;{$oldAddress}
                </div>
                {/if}
                <button type="button" class="btn btn-default" id="tijiao" onclick="duihuan()">确定兑换并提交</button>
                <div style="color:#ffffff;margin-left:40px;">
                    有疑问请联系客服微信：wxGame
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript" src="../../public/static/api/js/layer.js"></script>
<script type="text/javascript" src="../../public/static/api/js/region.js"></script>

    <script type="text/javascript">
        var data = obj.regions;
        var province=document.getElementById('province');
        var city=document.getElementById('city');
        var county=document.getElementById('county');
        var option = "<option value=''>请选择</option>";
        province.innerHTML = "<option value=''>-省-</option>";
        city.innerHTML = "<option value=''>-市-</option>";
        county.innerHTML = "<option value=''>-区-</option>";

        // 生成省列表
        for(var i=0;i<data.length;i++){
            var option_province=document.createElement('option');
            option_province.value=data[i].name;
            option_province.innerText=data[i].name;
            province.appendChild(option_province);
        }
        // 根据选择的省生成相应的城市列表
        province.onchange=function(e){
            for(var i=0;i<data.length;i++){
                if(data[i].name == e.target.value){
                    var data_city=data[i].regions;
                    var option_city=data_city.map(function(item){
                        return `<option value="${item.name}">${item.name}</option>`
                    }).join('');
                    // 根据选择的城市生成相应的县级列表
                    city.onchange=function(evt){
                        for(var j=0;j<data_city.length;j++){
                            if(data_city[j].name == evt.target.value){
                                var data_county=data_city[j].regions;
                                var option_count=data_county.map(function(items){
                                    return `<option value="${items.name}">${items.name}</option>`
                                }).join('');
                            }
                        }
                        county.innerHTML="<option value=''>-区-</option>"+option_count;
                    }
                }
            }
            city.innerHTML="<option value=''>-市-</option>"+option_city;
            county.innerHTML="<option value=''>-区-</option>"
        }
    </script>



<script>
    var isOld = false;
    function selectOld(){
        isOld = $('#oldAddress').is(':checked');
        if(isOld){
            $('.dizhi').hide();
        }else{
            $('.dizhi').show();
        }
    }
    function duihuan(){
        var data = {
            id:$('#id').val(),
            shop_code:$('#shop_code').val(),
            name:$('#name').val(),
            phone:$('#phone').val(),
            card:$('#card').val(),
            shen:$('#province').val(),
            shi:$('#city').val(),
            qu:$('#county').val(),
            address:$('#address').val(),
            oldAddress:"{$oldAddress}",
            isOld:isOld,
        };
        if(data.name==''){
            layer.open({
                content: '请填写姓名',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });return;
        }
        if(data.phone==''){
            layer.open({
                content: '请填写手机',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });return;
        }
        if(data.card==''){
            layer.open({
                content: '请填写身份证号',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });return;
        }
        if(data.shen=='' && isOld == false){
            layer.open({
                content: '请填写省',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });return;
        }
        if(data.shi=='' && isOld == false){
            layer.open({
                content: '请填写市',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });return;
        }
        if(data.qu=='' && isOld == false){
            layer.open({
                content: '请填写区',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });return;
        }
        if(data.address=='' && isOld == false){
            layer.open({
                content: '请填写详细地址',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });return;
        }

        $("#tijiao").attr("disabled",true);
        //提交
        $.post("{:url('duihuan')}", data, function(res){

            var res = eval("("+res+")");
            if(res.code == 200){
                layer.open({
                    content: '兑换成功',
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });

               ;
                setTimeout(" window.location.href='orderlist'",2000);
            }else{
                layer.open({
                    content: res.msg,
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
                $('#tijiao').attr("disabled",false);
            }

        }, 'json');

    }

    function goto(url){
        window.location.href=url;
    }

</script>
</body>
</html>